<!DOCTYPE html>
<html>
  <head>
    <title>数字砖练习器</title>
    <meta charset="utf-8">
  </head>
  <body>
	<script type="text/javascript" src="../libs/minicomps.min.js"></script>
	<script>
	const { Toggle, HSlider,VSlider,Panel, Canvas ,Button,TextArea,TextBox,TextInput,Label,Window,LabelInput,TipsManager,RadioButton,ColorPicker,TabbarWindow,Checkbox,Knob,Stage,MoonTextArea,Dropdown,TabbarButton,ProgressBar} = mc
	const width = Stage.width-18;
	const height = Stage.height-18;
	const panel = new Panel(document.body, 0, 0, width,height);
	var words='';
	var letters='';
	words=words.split(',');
	letters=letters.split(',');
	
	//console.log(words,letters)
	var card1='A,2,3,4,5,6,7,8,9,10,J,Q,K';	 card1=card1.split(',');
	var card2='黑桃,红桃,梅花,方块';		  card2=card2.split(',');
	var cards=[];
	card2.forEach((a)=>{card1.forEach((b)=>{cards.push(a+b)})});
	var nums=[1,2,3,4,5,6,7,8,9,0,1,2,3];
	var k=0;
	for(let i=10;i<=40;i+=10){
		for(let j=0;j<nums.length;j++){
			let s=0;
			if(j>9) s=40;
			let num=i+s+nums[j]
			cards[k]=num+'.'+cards[k];
			k++;
		}
	}
	//console.log(cards);
	var datas=cards;
	var statsLab=new Label(panel,200,40,'无状态');
	
	var timeLab=new LabelInput(panel,100,100,'记忆时间单位秒');
	timeLab.input.text='1';
	var timeClear=0;
	this.stats=1;
	this.index=0;
	
	var showLab=new LabelInput(panel,100,200,'等待指令');
	showLab.label.x=showLab.input.x;
	showLab.label.y=-20;
	new Button(panel,250,200,'确定',this.onSure.bind(this)).setSize(50);
	new Button(panel,300,200,'下一个',this.onNext.bind(this)).setSize(50);
	new Button(panel,350,200,'查看',this.onLook.bind(this)).setSize(50);

	var names=['顺序记忆','乱序记忆','看字写数','看数写字','转数字-无效','转字母-无效','转纸牌','暂停','开始','查看数字砖','查看字母砖','查看纸牌'];
	var i=0;
	names.forEach((a)=>{
		let num=(++i);
		var btn=new Button(panel,(i-1)*100,0,a+'-'+num,this.onSetBtn.bind(this));
		btn.name=String(num);
	})
	function onSetBtn(e){
		this.btnStats=Number(e.target.name)
		statsLab.text='当前状态：'+this.btnStats;
		switch(btnStats){
			case 1:start(1);break;
			case 2:start(2);break;
			case 3:write(3);break;
			case 4:write(4);break;
			case 5:datas=cards;break;
			case 6:datas=cards;break;
			case 7:datas=cards;break;
			case 8:stop();break;
			case 9:play();break;
			case 10:window.alert(words.join(','));break;
			case 11:window.alert(letters.join(','));break;
			case 12:window.alert(cards.join(','));break;
		}
	}
	function stop(){
		clearTimeout(timeClear);
	}
	function play(){
		clearTimeout(timeClear);
		start(this.stats+10);
	}
	function start(type){
		let time=Number(timeLab.input.text)*1000;
		clearTimeout(timeClear);
		if(type==1){
			this.index=0;
			this.stats=1;
			timeClear=setTimeout(()=>{start(11)},time);
		}else if(type==2){
			this.stats=2;
			timeClear=setTimeout(()=>{start(12)},time);
		}else if(type==11){
			let da=datas[this.index++];
			if(this.index>=datas.length) this.index=0;
			setShowLabel(da);
			timeClear=setTimeout(()=>{start(11)},time);
		}else if(type==12){
			let da=datas[Math.floor(Math.random()*datas.length)];
			setShowLabel(da);
			timeClear=setTimeout(()=>{start(12)},time);
		}
	}
	function setShowLabel(da){
		da=da.split('.');
		showLab.label.text=da[0];
		showLab.input.text=da[1];
	}
	function write(type){
		stop();
		let da=datas[Math.floor(Math.random()*datas.length)].split('.');
		console.log(da);
		if(type==3){
			this.answer=da[0];
			setShowLabel(da[1]+'.');
		}else if(type==4){
			this.answer=da[1];
			setShowLabel(da[0]+'.');
		}
	}
	document.addEventListener('keydown',(e)=>{if(e.keyCode==13)onSure()})
	function onSure(e){
		if(this.btnStats==3||this.btnStats==4){
			console.log(this.answer,showLab.input.text,this.answer==showLab.input.text)
			if(this.answer==showLab.input.text){
				write(this.btnStats);
			}else{
				showLab.input.text='';
			}
		}
	}
	function onNext(e){
		stop();
		let da;
		if(this.stats==1){
			da=datas[this.index++];
			if(this.index>=datas.length) this.index=0;
		}else if(this.stats==2){
			da=datas[Math.floor(Math.random()*datas.length)];
		}
		da=da.split('.');
		if(this.btnStats==3){
			this.answer=da[0];
			setShowLabel(da[1]+'.');
		}else if(this.btnStats==4){
			this.answer=da[1];
			setShowLabel(da[0]+'.');
		}else{
			TipsManager.alert('请切换到状态3或4');
		}
	}
	function onLook(e){
		if(this.btnStats==3||this.btnStats==4){
			TipsManager.alert(this.answer);
		}
	}
	//---------纸牌训练---------
	new Label(panel,0,280,'纸牌训练');
	var timeLabel=new Label(panel,200,280);
	var cardLabel=new Label(panel,0,330,'');
	var cardInput=new TextInput(panel,0,350);
	cardInput.setSize(width)
	var names=['10张牌','20张牌','30张牌','40张牌'];
	var [i,timeStart]=[0,0];
	names.forEach((a)=>{
		let num=(++i);
		var btn=new Button(panel,(i-1)*100,300,a,this.onSelectCard.bind(this));
		btn.name=String(num);
	})
	function onSelectCard(e){
		if(timeStart>0){
			TipsManager.alert('未提交');
			return;
		}
		timeStart=(new Date()).getTime();
		setTitle(true);
		update();
		cardInput.text='';
		let num=Number(e.target.name);
		num*=10;
		let as=[];
		let len=cards.length;
		while(as.length<num){
			let a=cards[Math.floor(Math.random()*len)];
			if(!as.includes(a))as.push(a);
		}
		console.log(as)
		this.answer='';
		cardLabel.text='';
		as.forEach((a)=>{
			let bs=a.split('.');
			cardLabel.text+=bs[1]+',';
			this.answer+=bs[0]+',';
		})
		cardLabel.text=cardLabel.text.substr(0,cardLabel.text.length-1);
		this.answer=this.answer.substr(0,this.answer.length-1);
	}
	var names=['隐藏','显示','提交'];
	var i=0;
	names.forEach((a)=>{
		let num=(++i);
		var btn=new Button(panel,(i-1)*100,380,a,this.onDoCard.bind(this));
		btn.name=String(num);
	})
	function setTitle(val){
		cardLabel.y=val?330:350;
	}
	function onDoCard(e){
		let num=Number(e.target.name);
		timeStart=0;
		if(num==1){
			setTitle(false);
		}else if(num==2){
			setTitle(true);
		}else if(num==3){
			if(this.answer==cardInput.text){
				TipsManager.alert('正确');
				
			}else{
				TipsManager.alert('错误');
			}
		}
	}
	function update(){
		if(timeStart>0){
			timeLabel.text=((new Date()).getTime()-timeStart)/1000;
			setTimeout(this.update.bind(this),100);
		}
	}
	</script>
  </body>
</html>